<template>
  <div class="register">
    <div class="registerSet">
      <div class="registerBack">
        <img src="./img/goback.png" @click="$router.back()" />
      </div>
      <div class="registerNum">
        <span>设置</span>
      </div>
    </div>
    <div class="registerId">
      <img class="imgHeader" src="./img/tx.png" />
      <span class="span1">啊妹</span>
      <span class="span2">会员名：阿妹阿妹</span>
      <img class="imgMore" src="./img/more.png" />
    </div>
    <div class="myAdress">
      <p>我的收货地址</p>
      <img src="./img/more.png" />
    </div>
    <div class="myAdress">
      <p>账户与安全</p>
      <img src="./img/more.png" />
    </div>
    <div class="myAdress">
      <p>地区设置</p>
      <img src="./img/more.png" />
    </div>
    <div class="myAdress">
      <p>关于手机淘宝</p>
      <img src="./img/more.png" />
    </div>
    <div class="registerOut">
      <div class="registerOutBtn" @click="tuiChu">
        <p>退出当前账户</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['res']),
  },
  mounted() {
    this.$store.dispatch('getLogin')
  },
  methods: {
    tuiChu() {
      if (localStorage.getItem('userName')) {
        localStorage.removeItem('userName')
        this.$router.push('/profile')
      } else {
        this.$router.back()
      }
    },
  },
}
</script>

<style scoped lang="stylus">
.register {
  background: #EEEEEE;
  height: 844px;

  .registerSet {
    width: 390px;
    height: 50px;
    border-bottom: 1px solid #fff;

    .registerBack {
      width: 40px;
      height: 45px;

      img {
        margin: 14px 0 0 10px;
        width: 10px;
        height: 15px;
      }
    }

    .registerNum {
      position: absolute;
      top: 0;
      right: 0;
      width: 350px;
      height: 45px;
      line-height: 45px;
      font-size: 18px;
      color: #333;

      span {
        padding-left: 125px;
      }
    }
  }

  .registerId {
    width: 100%;
    height: 65px;
    border-bottom: 1px solid #fff;

    .imgHeader {
      width: 48px;
      height: 48px;
      padding: 5px;
    }

    .span1 {
      position: fixed;
      margin: 10px 0 5px 0;
      font-size: 13px;
      color: #333;
    }

    .span2 {
      position: fixed;
      margin: 35px 0 5px 0;
      font-size: 13px;
      color: #333;
    }

    .imgMore {
      position: fixed;
      right: 0;
      margin: 20px 5px 0 0;
    }
  }

  .myAdress {
    display: block;
    width: 100%;
    height: 39px;
    line-height: 39px;
    margin-top: 10px;
    border-bottom: 1px #ffffff solid;

    p {
      float: left;
      color: #333;
      font-size: 13px;
      margin-left: 5px;
    }

    img {
      float: right;
      margin-top: 5px;
    }
  }

  .registerOut {
    width: 100%;
    height: 40px;
    background: url('./img/tcbg.jpg') repeat-y;
    margin-top: 25px;
    border-radius: 5px;

    p {
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>
